<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
	<div th:replace="~{commons/template::style}"></div>
	<title>学生管理</title>

</head>

<body>
<div th:replace="~{commons/template::head}"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="~{commons/template::leftSide(active='student')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>学生管理</h2>

			<div class="table-responsive" th:fragment="detail">
				<table class="table table-striped table-sm">
					<form class="form-inline" th:action="@{/selectStu}">
						<div class="row">
							<div class="col-md-4"></div>
							<div class="col-md-3">
								<div class="form-group">
									<input type="text" name="searchName" class="form-control" id="searchName" placeholder="学生名">
								</div>
							</div>
							<div class="col-md-2">
								<input type="submit" value="查询" class="btn btn-primary">
								<input type="button" id="insert" value="新增" class="btn btn-success">
							</div>
							<div class="col-md-3"></div>
						</div>
						<div class="row">
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tr>
									<td align="center">学生ID</td>
									<td align="center">账号ID</td>
									<td align="center">学院</td>
									<td align="center">专业</td>
									<td align="center">姓名</td>
									<td align="center">性别</td>
									<td align="center">功能</td>
								</tr>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">  <!--  内容  -->
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<tbody id="t1">
								<tr th:each="student:${pageInfo.getList()}">
									<td align="center" th:text="${student.getStuId()}"></td>
									<td align="center" th:text="${student.getUserId()}"></td>
									<td align="center" th:text="${student.getCollegeName()}"></td>
									<td align="center" th:text="${student.getMajorName()}"></td>
									<td align="center" th:text="${student.getStuName()}"></td>
									<td align="center" th:text="${student.getStuSex()}"></td>
									<td align="center">
										<input type="button" class="btn btn-info" value="修改" id="update" th:name="${student.getStuId()}">
										<input type="button" class="btn btn-outline-danger" value="删除" th:name="${student.getStuId()}+'/'+${student.getUserId()}">
									</td>
								</tr>
								</tbody>
							</div>
							<div class="col-md-2"></div>
						</div>
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
							<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
							<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
							<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
							<div class="col-md-1">
								<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
									<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
									<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
									<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
									<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
								</select>
							</div>
							<div class="col-md-1">
								<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
							</div>
							<div class="col-md-3"></div>
						</div>
					</form>
				</table>
			</div>
		</main>
	</div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form id="form">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增/修改[信息]</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body" id="content">
					<tr>
						<td>
							<span id="sIdN">学生ID：</span>
							<input id="sId" type="text" placeholder="学生ID" name="stuId" readonly>
						</td>
						<td>
							<span id="sAIdN">账户ID：</span>
							<input id="sAId" type="text" placeholder="账户ID" name="userId" readonly>
						</td>
					</tr>
					<tr><h6><mark>学院</mark></h6></tr>
					<tr>
						<td>
							<select class="form-control" id="college" name="collegeId" onchange="getMajor()">
							</select>
						</td>
					</tr>
					<tr><h6><mark>专业</mark></h6></tr>
					<tr>
						<td>
							<select class="form-control" id="major" name="majorId">
							</select>
						</td>
					</tr>
					<tr>
						<td align="center">
							<mark>姓名：</mark><input id="sName" type="text" placeholder="学生姓名" name="stuName">
						</td>
						<td id="sex">
							<mark>性别：</mark>
							<input type="radio" value="男" name="stuSex">男
							<input type="radio" value="女" name="stuSex">女
						</td>
					</tr>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
					<button type="button" class="btn btn-primary" id="save" onclick="sav()">保存</button>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div th:replace="~{commons/template::script}"></div>
</body>
<script>
	function getMajor() {
		$.ajax({
			url: "selectCollegeMajor",
			data: {collegeId: $("#college").val()},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#major").html("")
				$("#major").append("<option value=''>--选择专业--</option>");
				for (var i=0;i<returnData.length;i++){
					$("#major").append("<option value='"+returnData[i].majorId+"'>"+returnData[i].majorName+"</option>");
				}
			}
		})
	}
	$("#insert").click(function (){
		$("#form")[0].reset(); /* 对【表单】的重置  所以选定的是 form表单的id */
		$("#sIdN").hide();
		$("#sId").hide();
		$("#sAIdN").hide();
		$("#sAId").hide();
		$.ajax({
			url: "selectAllCollege",
			data: {},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#college").html("")
				$("#college").append("<option value=''>--选择学院--</option>");
				for (var i=0;i<returnData.length;i++){
					$("#college").append("<option value='"+returnData[i].collegeId+"'>"+returnData[i].collegeName+"</option>");
				}
			}
		})

		$("#myModal").modal('show');
	})
	function sav() {
		$.ajax({
			url:"insertOrUpdateStu",
			data:{stuId:$("#sId").val(),
				userId:$("#sAId").val(),
				collegeId:$("#college").val(),
				majorId:$("#major").val(),
				stuName:$("#sName").val(),
				stuSex:$("input[name='stuSex']:checked").val()},
			type:"post",
			dataType:"json",
			success:function (result){
				alert(result.message)
				window.location.href="http://localhost:8080/selectStu";
			}
		})
	}
	$("#t1").on("click","input[value='修改']",function() {
		$("#form")[0].reset();
		/* 搜索所有学院 */
		$.ajax({
			url: "selectAllCollege",
			data: {},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#college").html("")
				$("#college").append("<option value=''>-选择学院-</option>");
				for (var i=0;i<returnData.length;i++){
					$("#college").append("<option value='"+returnData[i].collegeId+"'>"+returnData[i].collegeName+"</option>");
				}
			}
		})
		/* 搜索所有专业 */
		$.ajax({
			url: "selectAllMajor",
			data: {},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#major").html("")
				$("#major").append("<option value=''>--选择专业--</option>");
				for (var i=0;i<returnData.length;i++){
					$("#major").append("<option value='"+returnData[i].majorId+"'>"+returnData[i].majorName+"</option>");
				}
			}
		})
		/* 填入已有学生信息 */
		$.ajax({
			url:"selectStuById",
			data:{id:this.name},
			type:"get",
			dataType:"json",
			success:function (data){
				$("#sId").val(data.stuId)
				$("#sAId").val(data.userId)
				$("#college").val(data.collegeId)
				$("#major").val(data.majorId)
				$("#sName").val(data.stuName)
				if (data.stuSex=='男'){
					$(":input[value='男']").attr("checked","checked");
				}else {
					$(":input[value='女']").attr("checked","checked");
				}
			}
		})
		$("#myModal").modal('show');
	})
	$("#t1").on("click","input[value='删除']",function (){
		let SIDAndUID = this.name;
		if(confirm("确定删除该学生的所有信息？")){
			$.ajax({
				url:"deleteStuInfo",
				data:{SIDAndUID:SIDAndUID},
				type:"get",
				dataType:"json",
				success:function (result){
					alert(result.message)
					window.location.href="http://localhost:8080/selectStu";
				}
			})
		}
	})
</script>
</html>